[BUG] [v1.1.0] Auxiliary sidebar: “active/open” uses interactive.hover in activity bar vs interactive.active on toggle

[tubel-hi]

Project

ide

Description

The mini activity bar marks the selected view with tokens.colors.interactive.hover as its filled background. The auxiliary sidebar visibility toggle uses tokens.colors.interactive.active when the bar is open. Both communicate “this auxiliary surface is the active/visible context” but rely on different design tokens, so the chrome reads inconsistent.

Error Message

Debug Logs

System Information

OS: Ubuntu
Context: Bounty Challenge v1.1.0

Screenshots

Steps to Reproduce

Open the secondary sidebar with a view selected.
Compare the filled background of the selected activity tab with the toggle button while the sidebar is visible.

Expected Behavior

One shared token (or documented pairing) for “auxiliary sidebar active / visible” across rail and toggle.

Actual Behavior

Activity selection: interactive.hover. Toggle when open: interactive.active.

Additional Context

No response

[hinzwilliam52-ship-it]

/attempt #39603

[echobt]

✅ Validated

VALID BUG - Design token inconsistency in auxiliary sidebar components.

Evidence Found:

1. Mini Activity Bar (src/components/workbench/AuxiliarySidebar.tsx:165):

   • Uses tokens.colors.interactive.hover for active/selected state
   • Code: background: isActive ? tokens.colors.interactive.hover : "transparent"

2. Auxiliary Sidebar Toggle (src/components/workbench/AuxiliarySidebar.tsx:674):

   • Uses tokens.colors.interactive.active for visible state
   • Code: background: auxiliaryBar.visible() ? tokens.colors.interactive.active : "transparent"

3. Auxiliary Bar Tab (src/components/AuxiliaryBar.tsx:115):

   • Uses tokens.colors.interactive.active for active state
   • Code: background: props.isActive ? tokens.colors.interactive.active : "transparent"

The Bug: Both the mini activity bar and the toggle button communicate "auxiliary sidebar is active/visible" but use different design tokens (interactive.hover vs interactive.active), causing visual inconsistency in the UI chrome. The screenshot confirms this with Developer Tools showing the CSS variable inspection.

Token Definitions:

• interactive.hover = var(--surface-hover)
• interactive.active = var(--surface-active)

This is a legitimate design system inconsistency bug that affects visual coherence.