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

* Update playwright screenshots and fix broken tests.

---------

Co-authored-by: Joe Boccanfuso <joe.boccanfuso@radicalimaging.com>

extensions/dicom-microscopy/src/components/ViewportOverlay/ViewportOverlay.css

@@ -5,13 +5,13 @@
   pointer-events: none !important;
 }
 
-.DicomMicroscopyViewer .text-primary-light {
+.DicomMicroscopyViewer .text-highlight {
   font-size: 14px;
   color: yellow;
   font-weight: normal;
 }
 
-.DicomMicroscopyViewer .text-primary-light span {
+.DicomMicroscopyViewer .text-highlight span {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;

extensions/dicom-microscopy/src/components/ViewportOverlay/index.tsx

@@ -37,10 +37,10 @@ export const generateFromConfig = ({ config, overlayData, ...props }) => {
     bottomLeft?: OverlayItem[];
     bottomRight?: OverlayItem[];
   } = overlayData ?? {};
-  const topLeftClass = 'top-viewport left-viewport text-primary-light';
-  const topRightClass = 'top-viewport right-viewport-scrollbar text-primary-light';
-  const bottomRightClass = 'bottom-viewport right-viewport-scrollbar text-primary-light';
-  const bottomLeftClass = 'bottom-viewport left-viewport text-primary-light';
+  const topLeftClass = 'top-viewport left-viewport text-highlight';
+  const topRightClass = 'top-viewport right-viewport-scrollbar text-highlight';
+  const bottomRightClass = 'bottom-viewport right-viewport-scrollbar text-highlight';
+  const bottomLeftClass = 'bottom-viewport left-viewport text-highlight';
   const overlay = 'absolute pointer-events-none microscopy-viewport-overlay';
 
   return (

extensions/dicom-microscopy/src/index.tsx

@@ -137,8 +137,8 @@ const extension: Types.Extensions.Extension = {
           return {
             disabled: false,
             className: isPrimaryActive
-              ? '!text-black bg-primary-light'
-              : '!text-common-bright hover:!bg-primary-dark hover:!text-primary-light',
+              ? '!text-black bg-highlight'
+              : '!text-foreground/80 hover:!bg-muted hover:!text-highlight',
             // Todo: isActive right now is used for nested buttons where the primary
             // button needs to be fully rounded (vs partial rounded) when active
             // otherwise it does not have any other use