fix(ui): keep semantic button colours on hover after the no-op hover cleanup

[yuneng-berri]

TLDR

Problem this solves:

• Three buttons lose their colour when you point at them
• The ghost and outline variants override them with plain foreground
• Nothing caught it, so the affordance reads as broken

How it solves it:

• Each button pins its own hover colour again
• The value is an alpha step, so it stays visible
• Three tests fail if the class disappears again

User Flow

Before: an admin pointing at a red, amber, or tinted button watches it turn plain grey, so the colour that told them what the button does is gone exactly when they are about to click it

1. They open http://localhost:4000/ui/?page=teams, open a team, and go to the Logging tab
2. They add an integration, then point at the red "Remove" button under it; the text and the trash icon turn ordinary dark grey
3. They collapse the left sidebar and point at the enterprise usage button at its foot; in dark mode the indigo award icon turns white
4. They open http://localhost:4000/ui/chat in a browser where site storage is blocked, and point at the "x" on the amber "Chat history won't be saved" banner; the amber turns grey against the amber banner

After: the same three buttons keep their colour and just deepen slightly, so the meaning survives the hover

1. They open http://localhost:4000/ui/?page=teams, open a team, and go to the Logging tab
2. They add an integration, then point at the red "Remove" button; it stays red and picks up a faint red wash
3. They collapse the left sidebar and point at the enterprise usage button; the award icon keeps its tint in both light and dark mode
4. They open http://localhost:4000/ui/chat with site storage blocked and point at the "x" on the banner; it stays amber

Relevant issues

Follow-up to #37579

Linear ticket

Pre-Submission checklist

• I have added meaningful tests
• The handful of test files covering my change pass locally, e.g. uv run pytest tests/test_litellm/<your_test_file>.py -v. Leave the suites (make test-unit-*, make test-unit) to CI: it finishes in ~15 minutes where a laptop takes an hour or more
• My PR passes all required CI/CD checks (e.g., lint, schema.d.ts sync check, etc.)
• My PR's scope is as isolated as possible; it only solves 1 specific problem
• I have received a Greptile Confidence Score of at least 4/5 before requesting a maintainer review (Greptile reviews automatically once the PR is opened; only comment @greptileai to re-request a review after pushing changes)

Delays in PR merge?

If you're seeing a delay in your PR being merged, ping the LiteLLM Team on Slack (#pr-review).

Screenshots / Proof of Fix

Setup: run the dashboard dev server against a local proxy so the screens below render live

python litellm/proxy/proxy_cli.py --config litellm/proxy/dev_config.yaml --detailed_debug --reload --use_v2_migration_resolver 2>&1 | tee litellm.log

cd ui/litellm-dashboard && npm run dev

Dark mode has no in-app toggle yet, so switch it on from the browser console where a case calls for it:

document.documentElement.classList.add('dark')

Before (93c1461)

Remove button in a team's logging settings

1. Open http://localhost:3000/teams/, open any team, and click the Logging tab
2. Click "Add Logging Integration", pick any integration, and leave the card on screen
3. Point at the red "Remove" button in that card's header and capture it: the label and trash icon turn dark grey

Collapsed enterprise usage rail

1. Open http://localhost:3000/ and collapse the left sidebar with the rail toggle
2. Turn dark mode on with the console line above
3. Point at the award button at the foot of the rail and capture it: the indigo icon turns white

Chat storage banner dismiss

1. Block site data for localhost in the browser's site settings, then open http://localhost:3000/chat/
2. The amber "Chat history won't be saved in this browser session" banner appears
3. Point at the "x" at its right edge and capture it: the amber glyph turns grey

After (3ca5c70e2eb0b3b7a37e1b7cf3fbb6ef6da1efb4)

Remove button in a team's logging settings

1. Open http://localhost:3000/teams/, open any team, and click the Logging tab
2. Click "Add Logging Integration", pick any integration, and leave the card on screen
3. Point at the red "Remove" button and capture it: it stays red over a faint red wash

Collapsed enterprise usage rail

1. Open http://localhost:3000/ and collapse the left sidebar with the rail toggle
2. Turn dark mode on with the console line above
3. Point at the award button and capture it: the icon keeps its tint

Chat storage banner dismiss

1. Block site data for localhost in the browser's site settings, then open http://localhost:3000/chat/
2. The amber banner appears
3. Point at the "x" and capture it: it stays amber

Type

🐛 Bug Fix

Caveats (if any)

• tailwind-merge decides this, so ordering alone would not fix it
• Neutral buttons keep the variant's hover, which reads fine
• Sites that never pinned a hover colour are left alone

Final Attestation

• The tests check the right things, including the edge cases, and regressions in the respective real-world customer use-cases are not possible after this PR

[greptile-apps]

Greptile Summary

The PR restores semantic hover colors for three dashboard controls and adds focused regression coverage.

• Keeps the chat storage-banner dismiss control amber on hover.
• Keeps the collapsed enterprise usage control tinted on hover.
• Keeps logging integration removal controls destructive on hover.
• Tests the final merged classes for each affected Button variant.

Confidence Score: 5/5

The PR appears safe to merge; the semantic hover utilities are valid and the focused tests exercise the same class-merging path used in production.

The three caller-supplied hover classes correctly replace the ghost or outline variant’s neutral hover foreground, while preserving valid theme-token colors in light and dark themes.

Important Files Changed

Filename	Overview
ui/litellm-dashboard/src/app/chat/page.tsx	Adds a valid warning hover text utility that overrides the ghost variant’s neutral foreground.
ui/litellm-dashboard/src/app/chat/page.integration.test.tsx	Adds regression coverage using the existing chat shell mock and verifies the final merged dismiss-button classes.
ui/litellm-dashboard/src/components/SidebarUsageCard.tsx	Preserves the sidebar-primary tint when the collapsed outline button is hovered.
ui/litellm-dashboard/src/components/SidebarUsageCard.test.tsx	Verifies that the collapsed rail retains its semantic hover class and drops the outline foreground override.
ui/litellm-dashboard/src/components/team/LoggingSettings.tsx	Preserves destructive styling on hover for logging integration removal buttons.
ui/litellm-dashboard/src/components/team/LoggingSettings.test.tsx	Adds focused coverage for the remove button’s final merged hover classes.

_{Reviews (1): Last reviewed commit: "fix(ui): keep semantic button colours on..." | Re-trigger Greptile}

[tin-berri]

done — #37580 approved. Tiny, well-scoped follow-up to #37579: three buttons (team logging "Remove", collapsed enterprise-usage rail, chat storage-banner dismiss) had a semantic color class overridden on hover by the shadcn ghost/outline variant's default hover:text-foreground, per the PR's caveat that tailwind-merge resolves class collisions by order regardless of specificity — so simply reordering wasn't the fix, each button needed its own explicit hover:<color>/80. Each of the three fixes has a matching regression test that asserts the pinned hover class is present and the variant's foreground class is absent, which is exactly the right assertion to catch a future re-override. No auth/billing/security surface, CI green.