Skip to content

fix(wework): align dark theme toolbar colors #2527

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
qdaxb merged 1 commit into from
Aug 9, 2026
Merged

fix(wework): align dark theme toolbar colors #2527

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
7 changes: 6 additions & 1 deletion wework/src/components/layout/DesktopSidebar.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1352,10 +1352,11 @@ describe('DesktopSidebar', () => {
})

test('matches Codex sidebar text emphasis levels', () => {
renderSidebar({}, { status: 'disconnected', isConnected: false })
renderSidebar({ onToggleSidebar: vi.fn() }, { status: 'disconnected', isConnected: false })

const newTaskButton = screen.getByTestId('new-chat-button')
const searchButton = screen.getByTestId('runtime-search-button')
const collapseSidebarButton = screen.getByTestId('collapse-sidebar-button')
const pluginsButton = screen.getByTestId('plugins-button')
const cloudButton = screen.getByTestId('sidebar-cloud-connection-button')
const newTaskIcon = newTaskButton.querySelector('svg')
Expand All @@ -1366,6 +1367,10 @@ describe('DesktopSidebar', () => {
for (const button of [newTaskButton, pluginsButton, cloudButton]) {
expect(button).toHaveClass('font-normal', 'text-[rgb(var(--color-sidebar-text-primary))]')
}
expect(collapseSidebarButton).toHaveClass(
'text-[rgb(var(--color-sidebar-text-primary))]',
'hover:text-[rgb(var(--color-sidebar-text-primary))]'
)
expect(searchButton).toHaveClass('text-[rgb(var(--color-sidebar-text-primary))]')
expect(newTaskButton).toHaveClass('h-[30px]', 'rounded-[10px]', 'text-base')
expect(pluginsButton).toHaveClass('h-[30px]', 'rounded-[10px]', 'text-base')
Expand Down
4 changes: 4 additions & 0 deletions wework/src/components/layout/DesktopSidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -484,6 +484,8 @@ const SIDEBAR_ROW_METADATA_CLASS =
'flex items-center gap-1 text-xs text-[rgb(var(--color-sidebar-text-muted))] group-hover/task:invisible'
const SIDEBAR_RUNNING_SPINNER_CLASS =
'h-4 w-4 shrink-0 animate-spin text-[rgb(var(--color-sidebar-text-muted))]'
const SIDEBAR_HEADER_ICON_BUTTON_CLASS =
'text-[rgb(var(--color-sidebar-text-primary))] hover:bg-[rgb(var(--color-sidebar-hover))] hover:text-[rgb(var(--color-sidebar-text-primary))] active:bg-[rgb(var(--color-sidebar-active))]'

const SIDEBAR_DEVICE_COLORS = [
'#5B7CFA',
Expand Down Expand Up @@ -3328,6 +3330,7 @@ export function DesktopSidebar({
sidebarCollapsed={false}
onToggleSidebar={onToggleSidebar}
className="gap-1"
buttonClassName={SIDEBAR_HEADER_ICON_BUTTON_CLASS}
/>
</div>
)}
Expand All @@ -3339,6 +3342,7 @@ export function DesktopSidebar({
sidebarCollapsed={false}
onToggleSidebar={onToggleSidebar}
className="gap-0"
buttonClassName={SIDEBAR_HEADER_ICON_BUTTON_CLASS}
/>
)}
{onOpenSearch && (
Expand Down
2 changes: 1 addition & 1 deletion wework/src/components/layout/DesktopTopBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { getPlatform } from '@/lib/platform'
import { MacOSTitleBarDragRegion } from './MacOSTitleBarDragRegion'

export const DESKTOP_TOP_BAR_BUTTON_CLASS =
'flex h-8 w-8 shrink-0 items-center justify-center rounded-lg border-0 bg-transparent p-0 text-[#6b7280] transition-colors hover:bg-black/[0.06] hover:text-[#374151] active:bg-black/[0.10] [&_svg]:h-4 [&_svg]:w-4 [&_svg]:stroke-[2]'
'flex h-8 w-8 shrink-0 items-center justify-center rounded-lg border-0 bg-transparent p-0 text-text-secondary transition-colors hover:bg-text-primary/[0.06] hover:text-text-primary active:bg-text-primary/[0.10] [&_svg]:h-4 [&_svg]:w-4 [&_svg]:stroke-[2]'

interface DesktopTopBarProps {
left?: ReactNode
Expand Down
6 changes: 4 additions & 2 deletions wework/src/components/layout/DesktopWindowControls.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ interface DesktopWindowControlsProps {
onToggleSidebar: () => void
onNewChat?: () => void
className?: string
buttonClassName?: string
toggleTestId?: string
}

Expand All @@ -16,6 +17,7 @@ export function DesktopWindowControls({
onToggleSidebar,
onNewChat,
className = '',
buttonClassName,
toggleTestId,
}: DesktopWindowControlsProps) {
const { t } = useTranslation('common')
Expand All @@ -31,7 +33,7 @@ export function DesktopWindowControls({
toggleTestId ?? (sidebarCollapsed ? 'expand-sidebar-button' : 'collapse-sidebar-button')
}
onClick={onToggleSidebar}
className={DESKTOP_TOP_BAR_BUTTON_CLASS}
className={cn(DESKTOP_TOP_BAR_BUTTON_CLASS, buttonClassName)}
aria-label={toggleLabel}
>
<PanelLeft />
Expand All @@ -41,7 +43,7 @@ export function DesktopWindowControls({
type="button"
data-testid="desktop-controls-new-chat-button"
onClick={onNewChat}
className={DESKTOP_TOP_BAR_BUTTON_CLASS}
className={cn(DESKTOP_TOP_BAR_BUTTON_CLASS, buttonClassName)}
aria-label={t('workbench.new_chat', '新对话')}
>
<Edit3 />
Expand Down
39 changes: 33 additions & 6 deletions wework/src/components/layout/workspace-panels/WorkspacePanelActions.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,8 +99,29 @@ describe('WorkspacePanelActions', () => {
expect(
screen.queryByTestId('toggle-right-workspace-panel-expanded-button')
).not.toBeInTheDocument()
expect(screen.getByTestId('toggle-bottom-workspace-panel-button')).toBeInTheDocument()
expect(screen.getByTestId('toggle-right-workspace-panel-button')).toBeInTheDocument()
expect(screen.getByTestId('toggle-bottom-workspace-panel-button')).toHaveClass(
'text-text-secondary',
'hover:bg-text-primary/[0.06]',
'hover:text-text-primary'
)
expect(screen.getByTestId('toggle-right-workspace-panel-button')).toHaveClass(
'text-text-secondary',
'hover:bg-text-primary/[0.06]',
'hover:text-text-primary'
)
})

test('uses theme-aware active colors for open workspace panels', () => {
render(<WorkspacePanelActions {...baseProps} rightPanelOpen bottomPanelOpen />)

expect(screen.getByTestId('toggle-bottom-workspace-panel-button')).toHaveClass(
'bg-muted',
'text-text-primary'
)
expect(screen.getByTestId('toggle-right-workspace-panel-button')).toHaveClass(
'bg-muted',
'text-text-primary'
)
})

test('expands and restores an open right workspace panel', async () => {
Expand Down Expand Up @@ -137,6 +158,10 @@ describe('WorkspacePanelActions', () => {
'aria-pressed',
'true'
)
expect(screen.getByTestId('toggle-right-workspace-panel-expanded-button')).toHaveClass(
'bg-muted',
'text-text-primary'
)
})

test('keeps environment info action visible after environment refresh resolves empty context', () => {
Expand Down Expand Up @@ -340,22 +365,24 @@ describe('WorkspacePanelActions', () => {
'overflow-hidden',
'rounded-[14px]',
'border-border/60',
'bg-background'
'bg-muted',
'text-text-secondary'
)
expect(screen.getByTestId('open-code-server-titlebar-button')).toHaveClass(
'h-8',
'gap-1.5',
'bg-transparent',
'hover:bg-black/[0.06]',
'active:bg-black/[0.10]'
'hover:bg-text-primary/[0.06]',
'active:bg-text-primary/[0.10]'
)
expect(screen.getByTestId('open-code-server-titlebar-button')).toHaveTextContent(
/Open location|打开位置|workbench\.open_workspace_location/
)
expect(screen.getByTestId('open-local-workspace-picker-button')).toHaveClass(
'h-8',
'w-7',
'hover:bg-black/[0.06]'
'text-text-secondary',
'hover:bg-text-primary/[0.06]'
)
expect(screen.getByTestId('open-local-workspace-picker-button')).not.toHaveClass('border-l')

Expand Down
12 changes: 6 additions & 6 deletions wework/src/components/layout/workspace-panels/WorkspacePanelActions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -250,7 +250,7 @@ export const WorkspacePanelActions = memo(function WorkspacePanelActions({
<div
data-testid="local-workspace-titlebar-control"
className={cn(
'group inline-flex h-8 shrink-0 items-center overflow-hidden rounded-[14px] border border-border/60 bg-background text-[#6b7280] transition-colors hover:border-border/80 hover:bg-background focus-within:ring-2 focus-within:ring-primary/25',
'group inline-flex h-8 shrink-0 items-center overflow-hidden rounded-[14px] border border-border/60 bg-muted text-text-secondary transition-colors hover:border-border/80 focus-within:ring-2 focus-within:ring-focus/70',
ideLoading && 'cursor-wait opacity-70'
)}
>
Expand All @@ -260,7 +260,7 @@ export const WorkspacePanelActions = memo(function WorkspacePanelActions({
onClick={() => void handleOpenLocalWorkspace()}
disabled={ideLoading}
className={cn(
'flex h-8 shrink-0 items-center gap-1.5 border-0 bg-transparent pl-2 pr-1.5 text-sm font-medium leading-[18px] text-text-primary transition-colors hover:bg-black/[0.06] hover:text-text-primary active:bg-black/[0.10] focus-visible:outline-none disabled:cursor-wait',
'flex h-8 shrink-0 items-center gap-1.5 border-0 bg-transparent pl-2 pr-1.5 text-sm font-medium leading-[18px] text-text-primary transition-colors hover:bg-text-primary/[0.06] active:bg-text-primary/[0.10] focus-visible:outline-none disabled:cursor-wait',
ideLoading && 'cursor-wait opacity-70'
)}
aria-label={t('workbench.open_project_ide_with', {
Expand All @@ -282,7 +282,7 @@ export const WorkspacePanelActions = memo(function WorkspacePanelActions({
optionTestIdPrefix="open-local-workspace-option"
disabled={ideLoading}
buttonClassName={cn(
'flex h-8 w-7 shrink-0 items-center justify-center border-0 bg-transparent p-0 text-[#6b7280] transition-colors hover:bg-black/[0.06] hover:text-[#374151] active:bg-black/[0.10] focus-visible:outline-none disabled:cursor-wait [&_svg]:h-4 [&_svg]:w-4 [&_svg]:stroke-[2]',
'flex h-8 w-7 shrink-0 items-center justify-center border-0 bg-transparent p-0 text-text-secondary transition-colors hover:bg-text-primary/[0.06] hover:text-text-primary active:bg-text-primary/[0.10] focus-visible:outline-none disabled:cursor-wait [&_svg]:h-4 [&_svg]:w-4 [&_svg]:stroke-[2]',
ideLoading && 'cursor-wait opacity-70'
)}
onSelect={handleOpenLocalWorkspace}
Expand Down Expand Up @@ -321,7 +321,7 @@ export const WorkspacePanelActions = memo(function WorkspacePanelActions({
onClick={onToggleRightPanelExpanded}
className={cn(
DESKTOP_TOP_BAR_BUTTON_CLASS,
rightPanelExpanded && 'bg-black/[0.10] text-[#374151]'
rightPanelExpanded && 'bg-muted text-text-primary'
)}
aria-label={rightPanelExpandedTitle}
aria-pressed={rightPanelExpanded}
Expand All @@ -342,7 +342,7 @@ export const WorkspacePanelActions = memo(function WorkspacePanelActions({
onClick={onToggleBottomPanel}
className={cn(
DESKTOP_TOP_BAR_BUTTON_CLASS,
bottomPanelOpen && 'bg-black/[0.10] text-[#374151]'
bottomPanelOpen && 'bg-muted text-text-primary'
)}
aria-label={bottomPanelTitle}
>
Expand All @@ -362,7 +362,7 @@ export const WorkspacePanelActions = memo(function WorkspacePanelActions({
onClick={onToggleRightPanel}
className={cn(
DESKTOP_TOP_BAR_BUTTON_CLASS,
rightPanelOpen && 'bg-black/[0.10] text-[#374151]'
rightPanelOpen && 'bg-muted text-text-primary'
)}
aria-label={rightPanelTitle}
>
Expand Down
Loading