colors(ui): 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 variables with current ui-next color system tokens. Additionally, identified remaining legacy colors with no direct replacements that were manually replaced on a case-by-case evaluation (see details below).

Changes & Results

Color Variable Migration: Legacy to ui-next Mapping

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

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

---

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

common-dark

• ToolbarDivider.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

DateRange component (ui-next):

• Still includes inputfield-main to match the design of legacy ui components until the Study List is redesigned

Worklist.tsx:

• Includes many legacy ui colors

ViewportActionBar is no longer in use

• currently uses secondary-light and other legacy colors
• evaluate if this is still in use

Further check across the App

• replace legacy ohif-scrollbar use

---

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 canceled.

Name	Link
🔨 Latest commit	a10fe95
🔍 Latest deploy log	https://app.netlify.com/projects/ohif-dev/deploys/68b1e794fee43e0008bbd033

[sedghi]

@dan-rukas

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