Skip to content

Improve Canvas UI readability across light and dark themes #717

Description

@qinezh

Description

The Microsoft Foundry Canvas has several readability and visual-consistency issues across light and dark themes. Some controls use low-contrast foregrounds, borders, separators, or surfaces, and the selected/hover states do not consistently follow the Fluent/Figma designs.

Affected areas

  • Create new hosted agents
    • option-button selected and hover states
    • border contrast in dark theme
    • icon surfaces, sizing, and label typography
  • Build current hosted agent
    • resource-label readability
    • toolbox menu surface hierarchy and separator visibility
    • Foundry action-link contrast
  • Deploy & test
    • primary Deploy button fill, border, and foreground
    • secondary Inspect button surface and border in dark theme
  • accordion and panel separators in dark theme

Expected behavior

Controls should follow the paired light and dark Figma designs, preserving clear hierarchy and readable contrast without introducing theme-specific hard-coded styles that regress the other theme.

Metadata

Metadata

Assignees

Labels

bugSomething isn't workingcanvasrelated issue to foundry-agent-canvas

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions