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/cornerstone/src/Viewport/Overlays/ViewportImageSliceLoadingIndicator.tsx

@@ -51,7 +51,7 @@ function ViewportImageSliceLoadingIndicator({ viewportData, element }) {
       <>
         <div className="absolute top-0 left-0 h-full w-full bg-black opacity-50">
           <div className="transparent flex h-full w-full items-center justify-center">
-            <p className="text-primary-light text-xl font-light">
+            <p className="text-highlight text-xl font-light">
               <h4>Error Loading Image</h4>
               <p>An error has occurred.</p>
               <p>{error}</p>
@@ -68,7 +68,7 @@ function ViewportImageSliceLoadingIndicator({ viewportData, element }) {
       // interacting with the mouse, since scrolling should propagate to the viewport underneath
       <div className="pointer-events-none absolute top-0 left-0 h-full w-full bg-black opacity-50">
         <div className="transparent flex h-full w-full items-center justify-center">
-          <p className="text-primary-light text-xl font-light">Loading...</p>
+          <p className="text-highlight text-xl font-light">Loading...</p>
         </div>
       </div>
     );

extensions/cornerstone/src/components/AccordionGroup/AccordionGroup.tsx

@@ -91,14 +91,14 @@ function DefaultAccordion(props) {
     return null;
   }
 
-  if (Boolean(asChild)) {
+  if (asChild) {
     return React.cloneElement(props.children, props);
   }
 
   return (
     <Accordion
       type={grouping.type || 'multiple'}
-      className="text-white"
+      className="text-foreground"
       defaultValue={defaultValue}
     >
       {[...groups.entries()].map(([key, group]) => {

extensions/cornerstone/src/components/DicomUpload/DicomUploadProgress.tsx

@@ -276,7 +276,7 @@ function DicomUploadProgress({
 
   const getNumCompletedAndTimeRemainingComponent = (): ReactElement => {
     return (
-      <div className="bg-muted flex h-14 items-center px-1 pb-4 text-lg text-white">
+      <div className="bg-muted text-foreground flex h-14 items-center px-1 pb-4 text-lg">
         {numFilesCompleted === dicomFileUploaderArr.length ? (
           <>
             <span className={NO_WRAP_ELLIPSIS_CLASS_NAMES}>{`${dicomFileUploaderArr.length} ${

extensions/cornerstone/src/components/DicomUpload/DicomUploadProgressItem.tsx

@@ -75,7 +75,7 @@ const DicomUploadProgressItem = memo(
         <div className="self-top flex w-0 shrink grow flex-col gap-1">
           <div className="flex gap-4">
             <div className="flex w-6 shrink-0 items-center justify-center">{getStatusIcon()}</div>
-            <div className="overflow-hidden text-ellipsis whitespace-nowrap text-white">
+            <div className="text-foreground overflow-hidden text-ellipsis whitespace-nowrap">
               {dicomFileUploader.getFileName()}
             </div>
           </div>

extensions/cornerstone/src/components/ModalityLoadBadge/ModalityLoadBadge.tsx

@@ -122,9 +122,9 @@ function ModalityLoadBadge({ viewportId }: { viewportId: string }) {
       return (
         <div
           data-cy={`ModalityLoadBadge-${viewportId}`}
-          className="flex h-6 cursor-default text-sm leading-6 text-white"
+          className="text-foreground flex h-6 cursor-default text-sm leading-6"
         >
-          <div className="bg-customgray-100 flex min-w-[45px] items-center rounded-l-xl rounded-r p-1">
+          <div className="bg-popover flex min-w-[45px] items-center rounded-l-xl rounded-r p-1">
             <StatusIcon />
             <span className="ml-1">{statusInfo.type}</span>
           </div>

extensions/cornerstone/src/components/ViewportOrientationMenu/ViewportOrientationMenu.tsx

@@ -203,7 +203,7 @@ function ViewportOrientationMenu({
           <div className="flex-1 text-left">Acquisition</div>
         </Button>
         {/* Divider */}
-        <div className="mx-1 my-2 border-t border-white/20" />
+        <div className="border-input mx-1 my-2 border-t" />
         <Button
           variant="ghost"
           className="flex h-7 w-full flex-shrink-0 items-center justify-start self-stretch px-1 py-0"

extensions/cornerstone/src/panels/PanelMeasurement.tsx

@@ -65,7 +65,7 @@ export default function PanelMeasurement(props): React.ReactNode {
     return EmptyComponent ? (
       <EmptyComponent items={displayMeasurements} />
     ) : (
-      <span className="text-white">No Measurements</span>
+      <span className="text-foreground">No Measurements</span>
     );
   }