fix(colors): Replaces legacy colors with ui-next colors

[dan-rukas]

Context

Updated legacy color variables in the App and ui-next components to use current ui-next colors. Replaced 11 legacy variables with current ui-next color system tokens. Additionally, generic colors (e.g., white, blue-500) were replaced with semantic equivalents. Remaining legacy colors with no direct replacements were manually evaluated and replaced on a case-by-case basis.

Migration Guide: Added https://docs.ohif.org/migration-guide/3p11-to-3p12/colors documentation with color mapping reference tables.

Changes & Results

Color Variable Migration: Legacy to ui-next Mapping

Legacy Color	Updated color (ui-next)
bkg-low	background
common-bright	foreground (various)
primary-light	highlight
inputfield-main	input
secondary-light	input
primary-dark	muted
bkg-med	muted
aqua-pale	muted-foreground
secondary-dark	popover
primary-active	primary
actions-primary	primary
secondary-main
primary-main
common-dark
customblue

Empty cells indicate legacy variables that were manually replaced (details below)

Generic Color Migrations

Generic Color	Semantic Replacement
white	foreground
blue-* (e.g., blue-500)	primary or highlight
gray-* (e.g., gray-800)	muted or popover

---

Colors replaced with new colors (not direct replacements)

These legacy variables do not map directly to ui-next color tokens and were evaluated and updated individually based on their use and context.

secondary-main

• DicomTagTable.tsx - Now uses bg-primary/20 for row hovers
• ProgressDropdown.tsx - Matches Dropdown component
• ProgressItem.tsx - Matches Dropdown component
• PatientInfo.tsx

primary-main

• InvestigationUseDialog.tsx - removed color class to match other buttons
• ProgressDiscreteBar.tsx - Now uses standard primary
• ProgressDropdown.tsx - Now uses standard primary
• StudyBrowserSort.tsx - Now uses standard primary
• PatientInfo.tsx
• ViewportActonButton.tsx - Matches styles inside Button
• ViewportDialog.tsx

customblue

• Sidepanel.tsx - Removed custom blue and updated tabs to match Tabs component

---

Study list related files that will continue to use legacy colors until Study list redesign

Worklist.tsx:

• Includes many legacy ui colors along with legacy ui library components and colors

---

Testing

Some limited testing for specific replacements. Not every replacement was tested since these are direct color replacements (or close to direct).

Checklist

PR

• My Pull Request title is descriptive, accurate and follows the
  semantic-release format and guidelines.

Code

• My code has been well-documented (function documentation, inline comments,
  etc.)

Public Documentation Updates

• [] The documentation page has been updated as necessary for any public API
  additions or removals.

Tested Environment

• OS: macOS Sequoia 15.6 (24G84)
• Node version: 20.19.1
• Browser: Chrome 139.0.7258.128 (Official Build)

[netlify]

✅ Deploy Preview for ohif-dev ready!

Name	Link
🔨 Latest commit	2d50226
🔍 Latest deploy log	https://app.netlify.com/projects/ohif-dev/deploys/694974b77403920008cb4f50
😎 Deploy Preview	https://deploy-preview-5351--ohif-dev.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[sedghi]

@dan-rukas

1. resolve yarn lock
2. can you add migration to here https://docs.ohif.org/migration-guide/3p11-to-3p12/

[dan-rukas]

New changes to this PR:

• Updated additional legacy colors since August
• Updated generic colors such as white to foreground so theming will work consistently
• Added a migration guide: /migration-guide/3p11-to-3p12/colors