ui(components): Viewport components updated to ui-next with design updates

[dan-rukas]

Context

Updates App to use ui-next Viewport components and updated designs to match OHIF design language

Changes & Results

• Design updates to match ui-next color variables and matched to OHIF design language
• Usability: Updated input color variable for better readability on all components
• Fix: Updated ViewportGrid to use color theme variables (instead of hex color)
• Replaced legacy ui components in App to use ui-next, including: ViewportActionArrows, ViewportActionButton, ViewportActionCorners, and ViewportActionCornersLocations

Testing

Initial testing completed to verify viewports and action buttons function correctly across various OHIF modes using ui-next

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.3 (24D60), Apple M4 Pro
• Node version: 23.7.0
• Browser: 134.0.6998.89 (Current)

[netlify]

✅ Deploy Preview for ohif-dev ready!

Name	Link
🔨 Latest commit	a418468
🔍 Latest deploy log	https://app.netlify.com/sites/ohif-dev/deploys/67f4382b8b51850008b887a1
😎 Deploy Preview	https://deploy-preview-4886--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 site configuration.

[netlify]

❌ Deploy Preview for ohif-platform-docs failed. Why did it fail? →

Name	Link
🔨 Latest commit	a418468
🔍 Latest deploy log	https://app.netlify.com/sites/ohif-platform-docs/deploys/67f4382be345a300080e1972

[Copilot]

Copilot reviewed 54 out of 55 changed files in this pull request and generated no comments.

Files not reviewed (1)

• extensions/cornerstone/src/Viewport/Overlays/ViewportOrientationMarkers.css: Language not supported

Comments suppressed due to low confidence (4)

extensions/cornerstone/src/components/WindowLevelActionMenu/VolumeRenderingQuality.tsx:45

• The previous implementation applied a custom background gradient for the slider. Please verify that the new Numeric component provides an equivalent visual indication or add custom styling if needed.

<Numeric.Container

extensions/cornerstone/src/components/WindowLevelActionMenu/VolumeLighting.tsx:65

• The custom background styling (via calculateBackground) for the slider is no longer present; confirm that the new design meets the desired visual feedback for lighting adjustments.

<Numeric.Container

extensions/cornerstone/src/Viewport/OHIFCornerstoneViewport.tsx:108

• The subtraction value for the scrollbar height was reduced from 40px to 10px. Please ensure this change does not negatively affect the layout or usability across various viewport sizes.

const scrollbarHeight = `${elementRef.current.clientHeight - 10}px`;

extensions/cornerstone-dicom-seg/src/viewports/OHIFCornerstoneSEGViewport.tsx:50

• [nitpick] If the selectedSegmentObjectIndex is intended to change over time, consider managing it with component state instead of a constant. If it is meant to remain unchanged, no action is required.

const selectedSegmentObjectIndex: number = 0;

[sedghi]

Thanks! As we discussed, we'll finalize the scrollbar color and extract it as a Tailwind parameter in the next pull request.